<template>
	<u-number-box v-model="val" :max="max" :min="min">
			<view slot="minus" class="minus flex flex-ai-center flex-js-center" :class="{min:min==value}">
				<u-icon name="minus" size="12" color="#FFFFFF" ></u-icon>
			</view>
			<view slot="plus" class="plus flex flex-ai-center flex-js-center" :class="{max:max==value}">
				<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
			</view>
	</u-number-box>
</template>

<script>
	export default {
		name: "z-number-box",
		props: {
			value: {
				type: Number,
				default: 1
			},
			max: {
				type: Number,
				default: Number.MAX_SAFE_INTEGER
			},
			min: {
				type: Number,
				default: 1
			}
		},
		model: {
			prop: 'value',
			event: "change"
		},
		computed: {
			val: {
				get() {
					this.value
				},
				set(v) {
					this.$emit('change', v)
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
.minus.min{
	// @extend .bg-color-dark,.bg-color-dark_then;
	
	background-color: #c2c2c2 !important;
}
.plus.max{
		background-color: #272B25 !important;
}
.minus,.plus{
	width: 48rpx;
	height: 48rpx;
	@extend .br-2;
	background-color: #333831 !important;
	
}
/deep/ .u-number-box__input{
	height: 48rpx !important;
	width: 80rpx !important;
	background-color: #333831 !important;
	color: white !important;
	border-radius: 2px;
}
.input{
	height: 48rpx;
}
</style>
